<template>
	<div class="add-FlowDesign-container">
		<el-dialog title="编辑流程图" v-model="isShowDialog" :fullscreen="true">
			<bpmn-modeler ref="refNode" :xml="ruleForm.xml" :is-view="isView" @save="save" :create-flag="false" />
		</el-dialog>
	</div>
</template>

<script lang="ts">
import bpmnModeler from '/@/components/bpmn/index'
import { reactive, toRefs, ref } from 'vue';
import { update, FlowDesign } from '/@/api/flow/flowDesign';
import { submitForm } from '/@/utils/form';
import { rule } from './rule';
export default {
	name: 'editFlowDesign',
	components: { bpmnModeler },
	setup() {
		const form = ref();
		const state = reactive({
			isShowDialog: false,
			isView: false,
			ruleForm: {
				id: 0, // id
				flowId: '', // 流程id
				name: '', // 流程名称
				xml: '', // xml
				svg: '', // svg
			} as FlowDesign,
			rules: rule
		});
		// 打开弹窗
		const openDialog = (row: any, isView: boolean = false) => {
			state.ruleForm = row;
			state.isShowDialog = true;
			state.isView = isView
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 保存
		const save = (data: FlowDesign) => {
			console.log('update', data);
			state.ruleForm = Object.assign(state.ruleForm, data)
			update(state.ruleForm).then(() => {
				closeDialog();
			})
		};

		return {
			openDialog,
			closeDialog,
			onCancel,
			save,
			submitForm,
			form,
			...toRefs(state),
		};
	},
};
</script>
